<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生登录系统</title>
  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Segoe UI','Microsoft YaHei',sans-serif;
    }

    body {
      background: url('p1.jpg') no-repeat center center fixed;
      background-size: cover;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .login-container {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-width: 450px;
      overflow: hidden;
    }

    .login-header {
      background: #1a2a6c;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .login-header h1 {
      font-size: 1.8rem;
      font-weight: 600;
      margin-top: 10px;
    }

    .login-body {
      padding: 30px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 16px;
      transition: border-color 0.3s;
    }

    .form-control:focus {
      border-color: #1a73e8;
      outline: none;
    }

    .btn-group {
      display: flex;
      gap: 15px;
      margin-top: 25px;
    }

    .btn {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.1s;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background: #1a73e8;
      color: white;
    }

    .btn-primary:hover {
      background: #0d62d9;
    }

    .btn-secondary {
      background-color: #f1f3f4;
      color: #5f6368;
    }

    .btn-secondary:hover {
      background-color: #e3e5e7;
    }

    @media (max-width: 480px) {
      .login-body {
        padding: 20px;
      }
      .btn-group {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="login-header">
    <img src="p1.jpg" height="92%" width="92%" hspace="20" vspace="20" alt="图书馆">
    <h1>学生登录系统</h1>
  </div>

  <div class="login-body">
    <form onsubmit="loginSubmit(event)">
      <div class="form-group">
        <label for="uname">学号</label>
        <input type="text" id="uname" name="uname" class="form-control" placeholder="请输入学号" required>
      </div>

      <div class="form-group">
        <label for="ukl">密码</label>
        <input type="password" id="ukl" name="ukl" class="form-control" placeholder="请输入密码" required>
      </div>

      <div class="btn-group">
        <button type="submit" class="btn btn-primary">确认登录</button>
        <button type="reset" class="btn btn-secondary">取消登录</button>
      </div>
    </form>
  </div>
</div>

<script>
  // 登录提交处理函数
  function loginSubmit(event) {
    // 阻止表单默认提交行为（避免页面刷新）
    event.preventDefault();

    // 获取表单数据
    const username = document.getElementById('uname').value;
    const password = document.getElementById('ukl').value;

    if (!username || !password) {
      alert('请输入学号和密码');
      return;
    }

    // 发送数据到后端进行登录
    fetch('http://localhost:8080/api/user/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
            .then(response => response.text())
            .then(msg => {
              if (msg === 'Login successful') {
                // 保存用户登录信息到sessionStorage
                sessionStorage.setItem("currentUser", username);
                alert('登录成功');
                window.location.href = 'index.html';
              } else {
                alert('登录失败: ' + msg);
              }
            })
            .catch(err => {
              console.error('Error:', err);
              alert('网络错误，请稍后重试');
            });
  }
</script>
</body>
</html>